<template>
  <div class="h-full py-4">
    <div id="vditor"></div>
  </div>
</template>

<script setup lang="ts">
import Vditor from 'vditor'
import 'vditor/dist/index.css'
const toolbar = [
  'headings',
  'bold',
  'italic',
  'strike',
  'link',
  '|',
  'list',
  'ordered-list',
  'check',
  'outdent',
  'indent',
  '|',
  'quote',
  'line',
  'code',
  'inline-code',
  'insert-before',
  'insert-after',
  '|',
  'upload',
  'table',
  '|',
  'undo',
  'redo',
  '|',
  'edit-mode',
  {
    name: 'more',
    toolbar: ['both', 'code-theme', 'content-theme', 'export', 'outline', 'preview', 'devtools', 'help']
  }
]
const props = defineProps({
  value: {
    type: String,
    default: () => ''
  },
  height: {
    type: [Number, String],
    default() {
      return '100%'
    }
  },
  placeholder: {
    type: String,
    default() {
      return '请输入内容'
    }
  },
  mode: {
    type: String,
    default() {
      return 'sv'
    }
  },
  mdContent: {
    type: String,
    default() {
      return ''
    }
  }
})
const editor = ref<Vditor | null>(null)
const emit = defineEmits(['update:value'])
function init() {
  editor.value = new Vditor('vditor', {
    lang: 'zh_CN',
    mode: 'sv',
    fullscreen: {
      index: 520 //全屏层级
    },
    toolbar,
    height: props.height,
    placeholder: props.placeholder,
    cache: {
      enable: false
    },
    preview: {
      delay: 50,
      actions: [
        // TODO 增加更多模式
        {
          key: 'vue3',
          text: 'vue3',
          click: (key) => {
            console.log(key)
          }
        }
      ]
    },
    input: (v) => {
      // 父组件使用 v-model:value  或者 @update:value
      emit('update:value', v)
    },
    toolbarConfig: {
      pin: true
    },
    counter: {
      enable: true
    },
    resize: {
      enable: true
    },
    upload: {
      accept: 'image/*',
      handler: (files) => {
        // TODO 文件处理
        return Promise.resolve('http://lc-btA8993K.cn-n1.lcfile.com/GRgO0ja0X7rgVyiFES7gNUBXsBJOba2R/mmexport1669804501787.png')
      },
      success: function (a, b) {
        console.log(a, b)
      }
    }
  })
}

onMounted(() => {
  init()
})
</script>

<style scoped></style>
